<template>
	<view class="message">
		<view class="statistics flex_space_b">
			<view class="item">已拼中:<text>{{success_count}}</text></view>
			<view class="item">未拼中:<text>{{error_count}}</text></view>
			<view class="item" v-if="pintuan_fail_hours != 0">拼团失败:<text>{{fail_count}}</text></view>
		</view>
		<view class="messageList">
			<view class="item flex_conter_c" v-for="(item,index) in msg_list" :key="index">
				<!-- <view class="leftBox flex_conter_c " :class="item.action == '10' ? 'chenggong' : 'shibai'">
					<u-icon :name="item.action == '10' ? 'chenggong' : 'shibai'" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
				</view> -->
				<view class="leftBox" :style="[leftBoxStyle(item.action)]">
					<text v-if="item.action == 10">购</text>
					<text v-else-if="item.action == 20">赚</text>
					<text v-else>退</text>
				</view>
				
				<view class="rightBox">
					<view class="topBox flex_space">
						<view class="title">{{item.action == '10' ? '已拼中' : (item.action == '20' ? '未拼中' : '拼团失败')}} <text v-if="item.is_read == 0" class="redText">最新</text></view>
						<view class="time">{{item.create_time}}</view>
					</view>
					<view class="con u-line-2" v-if="item.action == '10'">恭喜！您已拼中,获得积分<text>{{item.amount}}分</text>,参团商品：{{item.goods_title}}</view>
					<view class="con u-line-2" v-else-if="item.action == '20'">抱歉！您未拼中,获得补贴<text>{{item.amount}}元</text>,参团商品：{{item.goods_title}}</view>
					<view class="con u-line-2" v-else>
						抱歉！您拼团失败,支付金额<text>{{item.amount}}元</text>
						已退还到
						<text v-if="item.tuikuan_type == '10'">微信</text>
						<text v-else-if="item.tuikuan_type == '20'">余额</text>
						<text v-else>支付宝</text>
						,参团商品：{{item.goods_title}}</view>
				</view>
			</view>
		</view>
		
		<view class="noContent" v-if="msg_list.length == 0">
		  <image class="noContentImage" mode="widthFix" src="/static/noLive.png"></image>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				p:1,
				is_loading:false,
				is_more:true,
				msg_list:[],
				success_count:0,
				error_count:0,
				fail_count:0,
				pintuan_fail_hours:0
			}
		},
		onShow(options) {
			this.p = 1;
			this.is_more = true;
			this.loadData();
		},
		onReachBottom() {
			if(!this.is_loading){
			  if(!this.is_more){
				util.toast("没有更多数据了");
				return false;
			  }
			  this.p = parseInt(this.p) + 1;
			  this.loadData();
			}
		},
		methods: {
			loadData: function(){
				// 加载数据
				var that = this;
				let data = {
					'p':this.p
				};
				this.is_loading = true;
				util.requestPost("api.php/user/userOrderMsgList", data, function(res) {
					let is_more = false;
					if(res.data.msg_list.length >=15){
					  is_more = true;
					}
					if(that.p == 1){
						that.msg_list = res.data.msg_list;
					}else{
						that.msg_list = that.msg_list.concat(res.data.msg_list);
					}
					that.success_count = res.data.success_count;
					that.error_count = res.data.error_count;
					that.fail_count = res.data.fail_count;
					that.pintuan_fail_hours = res.data.pintuan_fail_hours;
					that.is_loading = false;
					that.is_more = is_more;
				
					uni.removeTabBarBadge({
						index:2
					});
				});
			},
		},
		computed: {
			leftBoxStyle() {
				return (index) => {
					let style = {}
					if (index == 10) {
						style.backgroundColor = '#19be6b'
					} else if (index == 20) {
						style.backgroundColor = '#fe0000'
					} else if (index == 30) {
						style.backgroundColor = '#ff9000'
					}
					return style;
				}
			}
		}
	}
</script>

<style scoped>
.message {
	min-height: 100%;
	background-color: var(--bgColor);
}

.statistics {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	padding: 20rpx;
	background-color: #FFFFFF;
	box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
}
.statistics .item {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
}
.statistics .item text {
	color: var(--primaryColor);
}

.messageList {
	padding: 100rpx 30rpx 30rpx;
}
.messageList .item {
	padding: 20rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
	margin-bottom: 20rpx;
}
.messageList .item .leftBox {
	width: 64rpx;
	height: 64rpx;
	border-radius: 64rpx;
	color: #FFFFFF;
	font-size: 34rpx;
	font-weight: 600;
	text-align: center;
	line-height: 64rpx;
}
.messageList .item .leftBox.chenggong {
	background-color: #19be6b;
}
.messageList .item .leftBox.shibai {
	background-color: var(--primaryColor);
}
.messageList .item .rightBox {
	flex: 1;
	margin-left: 20rpx;
}
.messageList .item .rightBox .topBox .title {
	font-weight: 600;
}
.messageList .item .rightBox .topBox .title text {
	font-size: 24rpx;
	font-weight: 500;
	margin-left: 8rpx;
}
.messageList .item .rightBox .topBox .time {
	font-size: 24rpx;
	color: #999;
}
.messageList .item .rightBox .con {
	font-size: 24rpx;
	color: #999;
	margin-top: 8rpx;
}
.messageList .item .rightBox .con text {
	color: var(--primaryColor);
}
</style>
